<template>
  <div class="home">
    <!-- 封面 -->
    <div class="section1">
      <div
        class="bg-image"
        :style="{ backgroundImage: 'url(' + require('@/assets/bg.png') + ')' }"
      ></div>
      <div class="content">
        <div class="title">
          <h1>海量可复用组件、模版 极速构建各行业应用</h1>
          <p class="tagline">
            提供丰富实用的通用组件、页面模版、数据大屏 持续更新
            XBoot完整版及商用授权用户永久免费使用本站所有物料！
          </p>
        </div>
        <div class="btn-area">
          <a @click="goto('list')" class="btn-large r">查看所有物料</a>
          <a
            href="http://xpay.exrick.cn/pay?xboot"
            target="_blank"
            class="btn-large btn-white"
            >立即获取源码</a
          >
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="search-area">
      <div class="container">
        <div class="search-box" @keydown.enter="handleSearch">
          <Input
            v-model="key"
            size="large"
            placeholder="搜索你想找的物料..."
            class="input-wrap"
          />
          <Select v-model="cate" size="large" class="select-wrap">
            <Option
              v-for="(item, index) in categorys"
              :key="index"
              :value="item.title"
              >{{ item.title }}</Option
            >
          </Select>
          <button class="search-btn" @click="handleSearch">搜索物料</button>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <section class="section2">
      <div class="section-title">
        <h1>应用搭建 <span class="highlighted">新突破</span></h1>
        <p>
          提供多种垂直领域模板和区块，快速创建项目，支持风格切换，满足个性化需求。
          物料自由搭配，开发调试一体化，覆盖项目研发的全流程管理，开箱即用。
        </p>
      </div>
      <div class="product-area">
        <div class="title">最新热门物料</div>
        <div class="filter">
          <p class="sort">排序：</p>
          <Dropdown trigger="click" @on-click="handleSort">
            <Icon
              type="md-more"
              color="#a3b1c4"
              size="26"
              style="cursor: pointer"
            />
            <DropdownMenu slot="list">
              <DropdownItem name="like">热门物料</DropdownItem>
              <DropdownItem name="createTime">最新上线</DropdownItem>
              <DropdownItem name="updateTime">最近更新</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
      <div class="sorting">
        <a
          v-for="(item, index) in tags"
          :key="index"
          @click="handleTag(item)"
          >{{ item.title }}</a
        >
      </div>
      <!-- 列表 -->
      <div class="list">
        <Row type="flex" :gutter="30">
          <Col span="8" v-for="(item, index) in products" :key="index"
            ><Product :data="item" class="item"
          /></Col>
        </Row>
      </div>
      <div class="more-product">
        <a class="btn-large" @click="toList">查看更多物料</a>
      </div>
    </section>
    <section class="section3">
      <div class="section-title">
        <h1>性价比极高的 <span class="highlighted">价格</span></h1>
        <p>
          提供多种垂直领域模板和区块，快速创建项目，支持风格切换，满足个性化需求。
          物料自由搭配，开发调试一体化，覆盖项目研发的全流程管理，开箱即用。
        </p>
      </div>
      <div class="container">
        <div class="pricing red">
          <h4 class="title">开源版</h4>
          <p class="price"><span class="ammount">免费</span>/永久</p>
          <div class="features">
            <ul>
              <li>XBoot开发平台基础功能</li>
              <li>无付费菜单功能模块</li>
              <li>无配套App</li>
              <li>无权使用物料中心</li>
              <li>Github公共仓库维护时间不定</li>
              <li>不支持商用，仅供学习</li>
            </ul>
          </div>
          <a class="pricing-btn">获取开源版</a>
        </div>
        <div class="pricing blue">
          <h4 class="title">完整版</h4>
          <p class="price">
            <sup>￥</sup><span class="ammount">{{ price }}</span
            >/永久
          </p>
          <div class="features">
            <ul>
              <li>XBoot开发平台基础功能</li>
              <li><strong>包含付费菜单功能模块</strong></li>
              <li><strong>包含配套App</strong></li>
              <li><strong>免费使用物料中心</strong></li>
              <li><strong>GitLab私库永久更新</strong></li>
              <li>不支持商用，仅供学习</li>
            </ul>
          </div>
          <a class="pricing-btn blue-btn">获取完整版</a>
        </div>
        <div class="pricing yellow">
          <h4 class="title">商用版</h4>
          <p class="price">
            <sup>￥</sup><span class="ammount">?998</span>/永久
          </p>
          <div class="features">
            <ul>
              <li>XBoot开发平台基础功能</li>
              <li><strong>包含付费菜单功能模块</strong></li>
              <li><strong>包含配套App</strong></li>
              <li><strong>免费使用物料中心</strong></li>
              <li><strong>GitLab私库永久更新</strong></li>
              <li><strong>支持商用，无任何限制</strong></li>
            </ul>
          </div>
          <a class="pricing-btn yellow-btn">咨询商用授权</a>
        </div>
      </div>
    </section>
    <section class="call-to-action">
      <div
        class="bgimage-holder"
        :style="{
          backgroundImage: 'url(' + require('@/assets/action-bg.jpeg') + ')',
        }"
      ></div>
      <div class="content">
        <h1>赶快加入XBoot开发平台！</h1>
        <h4>已有超过 1,000 个企业或开发者信任XBoot一站式快速开发平台。</h4>
        <a class="action-btn">现在就加入</a>
      </div>
    </section>
  </div>
</template>
<script>
import Product from "@/views/components/Product.vue";
import { data } from "@/data/data.js";
import { category } from "@/data/category.js";
import { tags } from "@/data/content.js";
export default {
  name: "home",
  components: {
    Product,
  },
  data() {
    return {
      products: [],
      categorys: category,
      key: "",
      cate: category[0].title,
      tags: tags,
      sort: "like",
      price: "...",
    };
  },
  methods: {
    goto(v) {
      this.$router.push({
        name: v,
      });
    },
    handleSearch() {
      this.$router.push({
        name: "list",
        query: {
          cate: this.cate,
          key: this.key,
        },
      });
    },
    handleTag(v) {
      this.$router.push({
        name: "list",
        query: {
          key: v.title,
        },
      });
    },
    toList() {
      this.$router.push({
        name: "list",
      });
    },
    getData() {
      let datas = data;
      datas = datas.sort((a, b) => {
        if (this.sort == "like") {
          return b[this.sort] - a[this.sort];
        } else {
          return b[this.sort].localeCompare(a[this.sort]);
        }
      });
      // 截取6个
      if (datas.length > 6) {
        datas = datas.slice(0, 6);
      }
      this.products = datas;
    },
    handleSort(v) {
      this.sort = v;
      this.getData();
    },
  },
  mounted() {
    this.getData();
    AV.init({
      appId: "6Bstbxl4NDU69I77D3nzf61h-gzGzoHsz",
      appKey: "gaFTnYlTul3M8qdiGlbfvoJK",
      serverURL: "https://6bstbxl4.lc-cn-n1-shared.com",
    });
    const query = new AV.Query("Price");
    query.equalTo("objectId", "6080216c2a5bb23590bcaedb");
    query.first().then((e) => {
      this.price = e.attributes.price;
    });
  },
};
</script>
<style lang="less">
@import "./home.less";
</style>
